<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主体部分</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .xianshi{
            display: block;
        }
        .buxianshi{
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
           $("#popupDiv").removeClass('xianshi').addClass('buxianshi');
           var msg=$("#contentSpan").html();
           var msg2=msg;
           var time=0;
           setInterval(function () {
               testIntervalk();
           },msg.length*400*3+1000*10);
           function testIntervalk() {
               $("#popupDiv").removeClass('buxianshi').addClass('xianshi');
               var startInterval=setInterval(function () {
                     var startStr=msg.substring(0,1);
                     var endStr=msg.substring(1);
                     msg=endStr+startStr;
                     $("#contentSpan").html(msg);
                     //轮播3次之后就不再轮播
                     time+=400;
                     if(time>msg.length*400*3){
                         stopInterval();
                     }
                   },400);
               function stopInterval() {
                   clearInterval(startInterval);
                   startInterval=null;
                   time=0;
                   msg=msg2;
                   $("#contentSpan").html(msg);
                   $("#popupDiv").removeClass('xianshi').addClass('buxianshi');
               }
           }
        })
    </script>
</head>
<body><!--background="images/exam5.jpg" style="background-size: cover;"-->
    <div id="popupDiv">
        <span id="contentSpan">少外出，少聚集，少流动，少接触 </span>
    </div>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div>
                <img src="images/1.jpg">
            </div>
            <div><img src="images/2.jpg"></div>
            <div><img src="images/5.jpg"></div>
            <div><img src="images/6.jpg"></div>
            <div><img src="images/7.jpg"></div>
        </div>
    </div>
    <div class="layui-card" id="mianBan1">
        <div class="layui-card-header">系统公告</div>
        <div class="layui-card-body">
            发烧不要慌<br>
            感染不乱跑<br>
            莫慌国家会出手
        </div>
    </div>
    <div class="layui-card" id="mianBan2">
        <div class="layui-card-header">疫情速报</div>
        <div class="layui-card-body">
            <ul id="idMsgUl" style="list-style: none">
                <li><a href="#">国家组织药品集中采购相关药品信息填报工作的通知</a></li>
                <li><a href="#">进一步加强复方地芬诺酯片等药品的管理。</a></li>
                <li><a href="#">哄抬血氧仪价格、使用过期医用防护口罩</a></li>
                <li><a href="#">关于进一步加强公共场所人员聚集安全管理的通知</a></li>
            </ul>
        </div>
    </div>
    <script>
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '50%'
                ,height: '520px'
                ,arrow: 'always' //始终显示箭头
                ,anim: 'fade' //切换动画方式
                ,arrow: 'hover'
            });
        });
    </script>
</body>
</html>